// 书籍详情页
import React from "react";
import styles from "./index.module.scss";
import { NavBar, ProgressBar, SearchBar, FloatingBubble } from "antd-mobile";
import { EditSOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
export default function index() {
  let nav = useNavigate();
  return (
    <div className={styles.box}>
      <NavBar
        style={{
          "--border-bottom": "1px solid #eee",
          backgroundColor: "white",
          position: "fixed",
          top: "0",
          left: "0",
          width: "100%",
        }}
        back="返回"
        onBack={() => {
          nav(-1);
        }}
      >
        书籍详情
      </NavBar>
      <section className={styles.content}>
        <header>
          <img src="src\images\touxiang01.jpg" alt="" />
          <div>
            <p>哎呀哎呀在哪里</p>
            <p>
              <span>好痒绘本</span>
              <span>游戏绘本</span>
            </p>
            <p>
              <span>作者</span> 丰田一彦
            </p>
            <p>
              <span>出版社</span> 长江少年儿童出版社
            </p>
            <p>购买实体绘本</p>
          </div>
        </header>
        <section>
          <img src="src\images\touxiang02.jpg" alt="" />
          <div>
            <div>
              <span>反应能力</span>
              <ProgressBar
                percent={50}
                text="已完成 50% 步"
                style={{
                  "--fill-color": "#ffeab2",
                }}
              />
            </div>
            <div>
              <span>艺术感知能力</span>
              <ProgressBar
                style={{
                  "--fill-color": "#ffeab2",
                }}
                percent={50}
                text="已完成 50% 步"
              />
            </div>
          </div>
        </section>
      </section>
      <footer className={styles.jianjie}>
        <p>简介</p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim,
          dignissimos? Sit mollitia sunt cupiditate, tenetur molestiae corrupti
          aliquam praesentium rerum. Quaerat, id facere eum laborum hic dicta
          facilis culpa provident.
        </p>
      </footer>
      <div className={styles.pinglun}>
        <h2>我要评论</h2>
        <SearchBar
          icon={<EditSOutline />}
          placeholder="说两句吧"
          style={{
            "--border-radius": "15px",
            "--height": "30px",
            marginTop: "10px",
          }}
        />
      </div>
      <FloatingBubble
        style={{
          "--initial-position-bottom": "24px",
          "--initial-position-right": "24px",
          "--edge-distance": "24px",
        }}
        onClick={() => {
          nav("/");
        }}
      >
        <span className="iconfont icon-zhuye" style={{ fontSize: 20 }}></span>
      </FloatingBubble>
    </div>
  );
}
